<!doctype html>
<html lang="en">
<head>
    <title>Code coverage report for components\nav\dx-nav.vue</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../../prettify.css" />
    <link rel="stylesheet" href="../../base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type='text/css'>
        .coverage-summary .sorter {
            background-image: url(../../sort-arrow-sprite.png);
        }
    </style>
</head>
<body>
<div class='wrapper'>
  <div class='pad1'>
    <h1>
      <a href="../../index.html">all files</a> / <a href="index.html">components/nav/</a> dx-nav.vue
    </h1>
    <div class='clearfix'>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Statements</span>
        <span class='fraction'>0/11</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Branches</span>
        <span class='fraction'>0/2</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Functions</span>
        <span class='fraction'>0/2</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Lines</span>
        <span class='fraction'>0/11</span>
      </div>
    </div>
  </div>
  <div class='status-line low'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
    &lt;ul class="dx-nav"&gt;
        &lt;li 
            v-for="(nav, index) in navs" 
            :key="index"
            :class="{'is-open':listStatus[index]}"
            class="dx-nav__list" 
        &gt;
            &lt;div 
                :class="{'is-active': listStatus[index]}"
                class="dx-nav__list--title-wrap"
            &gt;
                &lt;!--判断一级路由是否具有二级子路由，若有二级子路由，则用span元素。通过nav对象是否具体path属性来判断--&gt;
                &lt;!-- router-link组件使用click事件，必须加native修饰符，否则无效 --&gt;
                &lt;router-link 
                    v-if="nav.path" 
                    tag="div" 
                    active-class="dx-router-active" 
                    :to="nav.path"&gt;
                    &lt;a class="dx-nav__list--title-link"&gt;{{nav.title}}&lt;/a&gt;
                &lt;/router-link&gt;
                &lt;span 
                    v-else
                    :class="{
                        'dx-nav__list--title-narrow-default': nav.subNavs,
                        'is-active':listStatus[index],
                        'dx-nav__list--title-narrow-active': nav.subNavs &amp;&amp; listStatus[index]
                    }"
                    class = "dx-nav__list--title-link"
                    @click="changeListStatus(index)"&gt;
                    {{nav.title}}
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;!-- 频繁切换使用v-show --&gt;
            &lt;div class="dx-nav__sub"&gt;
                &lt;dx-collapse-transition&gt;
                    &lt;ul v-show="listStatus[index] &amp;&amp; !nav.path"&gt;
                         &lt;!--   v-for循环组件一般需要加key属性唯一标识，避免组件就地复用策略 --&gt;
                        &lt;router-link 
                           v-for="(subNav,index) in nav.subNavs" 
                           tag="li" 
                           active-class="dx-router-active" 
                           :to="subNav.path" 
                           :key="index"&gt;
                           &lt;a class="dx-nav__sub--title-link"&gt;{{ subNav.title }}&lt;/a&gt;
                        &lt;/router-link&gt;
                    &lt;/ul&gt;
                &lt;/dx-collapse-transition&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
    name: 'DxNav',
    props: {
        navs: {
            type: Array,
            default: function() <span class="fstat-no" title="function not covered" >{</span>
<span class="cstat-no" title="statement not covered" >                return []</span>
            }
        }
    },
    data() {
<span class="cstat-no" title="statement not covered" >        return {</span>
            listStatus: [],
            preIndex: 0
        }
    },
    watch: {
        navs: function(val, oldVal) <span class="fstat-no" title="function not covered" >{</span>
            let len = <span class="cstat-no" title="statement not covered" >val.length</span>
<span class="cstat-no" title="statement not covered" >            for (let i = 0; i &lt; len; i++) {</span>
<span class="cstat-no" title="statement not covered" >                this.listStatus.push(false)</span>
            }
        }
    },
    methods: {
        /* 主要的思路:用一个preIndex标记前一个打开的一级子路由，当点击打开另外一个路由时候，
        			 可以关闭前一个一级路由的，同时打开新的一级路由
        */
        changeListStatus(index) {
            // 如果切换的是同一个一级路由，且自己toggle切换
<span class="cstat-no" title="statement not covered" >            if (this.preIndex === index) {</span>
<span class="cstat-no" title="statement not covered" >                this.listStatus[index] = !this.listStatus[index]</span>
            } else {
                 // 数据更新检测，使用Vue方法才可以，改变数组值刷新组件
<span class="cstat-no" title="statement not covered" >                this.listStatus[this.preIndex] = false</span>
<span class="cstat-no" title="statement not covered" >                this.listStatus[index] = true</span>
<span class="cstat-no" title="statement not covered" >                this.preIndex = index</span>
            }
<span class="cstat-no" title="statement not covered" >            this.$forceUpdate()</span>
        }
    }
}
&lt;/script&gt;
&lt;style lang="scss"&gt;
    @include B(nav) {
        background-color: $--dx-nav-background-color;
        @include E(list) {
            padding: 0 1.5rem;
            /* 链接样式 */
            @include M(title-link) {
                font-size: $--dx-nav-link-font-size;
                color: $--dx-nav-link-color;
                cursor: pointer;
                display: block;
                padding: 1rem;
                /*点击标题时候的文字颜色*/
                @include when(active) {
                    color: $--dx-nav-link-color-hover;
                }
            }
            &amp;:hover {
                background-color: $--dx-nav-list-background-color-hover;
                .dx-nav__list--title-link {
                    color: $--dx-nav-link-color-hover;
                }
             }
            @include when(open) {
                background-color: $--dx-nav-list-background-color-open;
            }
            @include M(title-wrap) {
                /*点击标题时候的文字颜色*/
                @include when(active) {
                    .dx-nav__list--title-link {
                        color: $--dx-nav-link-color-hover;
                    }
                }
            }
            /*一级标题打开，关闭接口指示器*/
            @include M(title-narrow-default) {
                background: url('../../images/narrow-left.png') no-repeat right center;
            }
            @include M(title-narrow-active) {
                background: url('../../images/narrow-down.png') no-repeat right center;
            }
        }
&nbsp;
        @include E(sub) {
            @include M(title-link) {
                padding-left: 2rem;
                color: $--dx-nav-link-color-hover !important;
                font-size: $--dx-nav-link-font-size;
                line-height: 2.5rem;
                &amp;:hover {
                    color: $--dx-nav-sub-link-color-hover !important; 
                }
            }
        }  
    }
&nbsp;
/*自定义router-linker路由活动时样式颜色*/
/*链接文字的样式*/
.dx-router-active .dx-title-link{
    color: $--dx-nav-link-color-hover;
}
/* nav动画效果 */
.dx-collapse-transition {
  transition: height .3s  ease-in-out;
}
&lt;/style&gt;</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
  Code coverage
  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Feb 24 2019 15:08:50 GMT+0800 (中国标准时间)
</div>
</div>
<script src="../../prettify.js"></script>
<script>
window.onload = function () {
        if (typeof prettyPrint === 'function') {
            prettyPrint();
        }
};
</script>
<script src="../../sorter.js"></script>
</body>
</html>
